<template>
	<z-paging ref="paging" v-model="list" @query="getList">
		<!-- <template slot="top">
			<view style="background-color: #ffffff;">
				<u-tabs :current="current" @change="setCurrent" :list="[{ name: '全部订单' }, { name: '待使用' }]" lineHeight="8rpx" lineWidth="70rpx" :scrollable="false"></u-tabs>
			</view>
		</template> -->
		<view class="d-p-l-30 d-p-r-30">
			<view class="d-m-t-20 item d-p-30" v-for="(item, index) in list" :key="index">
				<view class="d-flex">
					<u-image src="/static/shop.png" width="30rpx" height="30rpx"></u-image>
					<view class="d-font-28 d-m-l-20 d-flex-1">{{ item.venue_name }}</view>
					<view class="d-font-28 status">{{ item.status_text }}</view>
				</view>
				<view>
					<view class="d-flex d-col-top d-m-t-20 p">
						<u-image :src="item.goods_image" width="130rpx" height="130rpx" radius="10rpx"></u-image>
						<view class="d-flex-1 d-p-l-20">
							<view class="d-font-28 d-bold">{{ item.goods_name }}</view>
							<view class="d-flex d-m-t-10">
								<view class="d-font-24 tags d-m-r-20">x1</view>
								<!-- <view class="d-font-24 tags">使用时间:2022-12-15 12:00:00</view> -->
							</view>

							<view class="d-red">
								<text class="d-font-24">￥</text>
								<text class="d-font-36 bold">{{ item.goods_price }}</text>
								<!-- <text class="d-font-30 bold">.00</text> -->
							</view>
						</view>
					</view>
					<view class="d-font-24 d-99 d-m-t-10 p">
						<view>订单编号: {{ item.order_item_id }}</view>
						<view>交易时间: {{ item.pay_complete }}</view>
						<view v-if="item.order_type == 3">场地: {{ item.court_field }}</view>

						<!-- <view class="qd" @click="toInfo(item)"><image src="/static/qd.png"></image></view> -->
					</view>
					<view class="d-m-t-20 d-flex d-row-right">
						<view class="d-m-r-20">
							<u-button type="info" shape="circle" :custom-style="{
									height: '60rpx',
									borderColor: '#999999',
									color: '#999999',
									fotnSize: '28rpx',
									width: '174rpx'
								}" @click="addrefund(item.id)">
								退款
							</u-button>
						</view>
					</view>
					<view class="d-m-t-20 d-flex d-row-right" v-if="item.order_status == 2">
						<view class="d-m-r-20">
							<u-button type="info" shape="circle" :custom-style="{
									height: '60rpx',
									borderColor: '#999999',
									color: '#999999',
									fotnSize: '28rpx',
									width: '174rpx'
								}" @click="(actionId = item.order_item_id), (show.cancel = true)">
								取消订单
							</u-button>
						</view>
						<view>
							<u-button type="primary" shape="circle" :custom-style="{
									height: '60rpx',
									borderColor: '#59A0FF',
									background: '#59A0FF',
									fotnSize: '28rpx',
									width: '174rpx'
								}" @click="(actionId = item.id), (show.paytype = true)">
								去预约
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<d-mode :show="show.cancel" content="您确认要取消该订单吗?" @cancel="show.cancel = false" @confirm="cancelOrder"></d-mode>
		<u-picker :show="show.paytype" title="预约方式" :columns="[payList]" keyName="label" closeOnClickOverlay
			@close="show.paytype = false" @cancel="show.paytype = false" @confirm="toPay"></u-picker>
	</z-paging>
</template>

<script>
	import {
		getMyOrder,
		cancelOrder,
		toPay,
		payList,
		moniRefund
	} from '@/common/api';
	export default {
		data() {
			return {
				current: 0,
				list: [],
				orderStatus: ['all', '2'],
				actionId: '',
				show: {
					cancel: false,
					paytype: false
				},
				payList: []
			};
		},
		onLoad() {
			payList().then(res => {
				let payList = [];
				if (res.list[1]) {
					payList.push({
						value: 1,
						label: res.list[1]
					});
				}
				if (res.list[2]) {
					payList.push({
						value: 2,
						label: res.list[2] + res.free_count
					});
				}
				if (res.list[3]) {
					payList.push({
						value: 3,
						label: res.list[3]
					});
				}
				if (res.list[4] && res.multifunctional_card_count > 0) {
					payList.push({
						value: 4,
						label: res.list[4]
					});
				}
				this.payList = payList;
			});
		},
		methods: {
			addrefund(order_item_id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否退款？',
					cancelText: "取消",
					confirmText: "确认",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							moniRefund({
									app_id: '11111',
									project_id: '10072',
									open_id: '22222',
									order_item_id: order_item_id,
									refund_reason: '11',
								})
								.then(result => {
									console.log(result,'resultresult')
									uni.$u.toast(result.msg);
									that.getList()
								})
								.catch(err => {
									console.log(result,'resultresult111')
									uni.$u.toast(result.msg);
								});

						}
					}
				})
			},
			setCurrent(e) {
				this.current = e.index;
				this.$refs.paging.reload(false);
			},
			async getList(page, limit) {
				getMyOrder({
						page,
						limit,
						orderStatus: this.orderStatus[this.current]
					})
					.then(res => {
						this.$refs.paging.complete(res.data.data);
					})
					.catch(err => {
						this.$refs.paging.complete(false);
					});
			},
			cancelOrder() {
				this.show.cancel = false;
				cancelOrder({
						order_id: this.actionId
					})
					.then(res => {
						uni.$u.toast('订单已取消');
						this.$refs.paging.reload(false);
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试');
					});
			},
			toInfo(item) {
				if (item.order_type == 3) {
					uni.$u.route({
						url: '/pages/mine/view'
					});
				} else if (item.order_type == 2) {
					uni.$u.route({
						url: '/pages/mine/card'
					});
				} else {
					uni.$u.route({
						url: '/pages/mine/ticket'
					});
				}
			},
			toPay(e) {
				this.show.paytype = false;
				toPay({
						id: this.actionId,
						pay_way: e.value[0].value
					})
					.then(res => {
						// 如果预约成功
						//this.$refs.paging.reload(false);
						window.location.href = res.pay_url;
						uni.$u.toast('预约成功');
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试!');
					});
			},
			getPayName(name) {
				if (name) {
					return name.replace(/[:\s]/g, '');
				}
				return name;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
		color: #333;

		.top {
			background-color: #fff;
		}

		.item {
			background: #ffffff;
			box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
			border-radius: 16rpx;

			.tags {
				height: 36rpx;
				background: #f3f3f3;
				border-radius: 18rpx;
				display: inline-block;
				padding: 0 20rpx;
			}

			.bold {
				font-weight: bold;
			}

			.p {
				position: relative;
			}

			.qd {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				right: 0;
				bottom: 0;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}

	.d-bold {
		font-weight: bold;
	}

	.d-red {
		color: #ff4105;
	}

	.d-99 {
		color: #999999;
	}

	.status {
		color: #ff4105;
	}
</style>